<template>
    <div class="header-container">
        <div class="left-content">
            <el-button 
                type="text" 
                class="collapse-btn"
                @click="toggleCollapse"
            >
                <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
            </el-button>
              <el-breadcrumb separator="/" class="breadcrumb" :class="{'mobile-hidden': screenWidth < 576}">
                  <el-breadcrumb-item :to="{ path: '/' }">{{ $t('common.home') }}</el-breadcrumb-item>
                  <el-breadcrumb-item v-if="currentPath !== $t('common.home')">{{ $t(currentPath) }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        
        <div class="right-content">
            <lang-selector class="lang-selector"></lang-selector>
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="user-info">
                    <img :src="avatar" class="avatar" />
                    <span class="username" :class="{'mobile-hidden': screenWidth < 576}">{{ username }}</span>
                    <i class="el-icon-caret-bottom"></i>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="profile">{{ $t('common.profile') }}</el-dropdown-item>
                        <el-dropdown-item command="logout">{{ $t('common.logout') }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import LangSelector from './LangSelector.vue'

export default {
    name: "Header",
    components: {
        LangSelector
    },
    props: {
        isCollapse: Boolean,
    },
    data() {
        return {
            username: "",
            avatar: require("../assets/avatar.png"),
            currentPath: this.$t('common.home'),
            screenWidth: document.body.clientWidth
        }
    },
    watch: {
        screenWidth(val) {
            if (val < 768 && !this.isCollapse) {
                this.$emit("update:isCollapse", true)
            }
            if (val >= 768 && this.isCollapse) {
                this.$emit("update:isCollapse", false)
            }
        },
        // 监听路由变化
        '$route': {
            handler(to) {
                // 从路由的meta信息中获取页面名称国际化键名
                if (to.meta && to.meta.nameKey) {
                    this.currentPath = this.$t(to.meta.nameKey);
                } else {
                    this.currentPath = this.$t('common.home');
                }
            },
            immediate: true // 立即执行一次
        },
        // 监听i18n.locale变化
        '$i18n.locale': {
            handler() {
                // 当语言切换时，更新当前路径的国际化文本
                if (this.$route.meta && this.$route.meta.nameKey) {
                    this.currentPath = this.$t(this.$route.meta.nameKey);
                } else {
                    this.currentPath = this.$t('common.home');
                }
            }
        }
    },
    mounted() {
        window.onresize = () => {
            this.screenWidth = document.body.clientWidth
        }
        // 初始化时检查屏幕宽度
        if (this.screenWidth < 768) {
            this.$emit("update:isCollapse", true)
        }
        
        // 初始化面包屑
        if (this.$route.meta && this.$route.meta.nameKey) {
            this.currentPath = this.$t(this.$route.meta.nameKey);
        }
        
        // 获取用户信息
        this.getUserInfo();
    },
    methods: {
        getUserInfo() {
            const userInfo = sessionStorage.getItem("userInfo");
            if (userInfo) {
                const user = JSON.parse(userInfo);
                this.username = user.userName || user.name || user.userId || this.$t('common.unknown');
            } else {
                this.username = this.$t('common.unknown');
                // 如果没有用户信息，可能需要重新登录
                this.$router.push('/login');
            }
        },
        toggleCollapse() {
            // 在移动端下，只触发侧边栏显示/隐藏的事件，不改变折叠状态
            if (this.screenWidth < 768) {
                this.$emit("toggle-sidebar");
            } else {
                // 桌面端下，才改变折叠状态
                this.$emit("update:isCollapse", !this.isCollapse);
            }
        },
        handleCommand(command) {
            if (command === 'logout') {
                // 根据屏幕宽度设置确认框的宽度
                const width = this.screenWidth < 768 ? '80%' : '30%';
                
                this.$confirm(this.$t('common.logoutConfirm'), this.$t('common.tip'), {
                    confirmButtonText: this.$t('common.confirm'),
                    cancelButtonText: this.$t('common.cancel'),
                    type: 'warning',
                    width: width,
                    customClass: 'logout-confirm-dialog'
                }).then(() => {
                    sessionStorage.clear()
                    this.$router.push('/login')
                }).catch(() => {
                    // 修复取消退出时的错误，添加空的catch处理
                    // 用户取消操作，不做任何处理
                })
            } else if (command === 'profile') {
                this.$router.push('/userInfo');
            }
        }
    }
}
</script>

<style scoped>
.header-container {
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    box-shadow: 0 1px 4px rgba(0,21,41,0.08);
    position: relative;
    z-index: 100;
}

.left-content {
    display: flex;
    align-items: center;
}

.collapse-btn {
    padding: 0;
    font-size: 20px;
    margin-right: 20px;
    color: #606266;
}

.collapse-btn:hover {
    color: #409EFF;
}

.breadcrumb {
    margin-left: 8px;
}

.right-content {
    display: flex;
    align-items: center;
}

.user-info {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0 8px;
    height: 40px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.user-info:hover {
    background-color: #f6f6f6;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
}

.username {
    font-size: 14px;
    color: #606266;
    margin-right: 4px;
}

.el-icon-caret-bottom {
    font-size: 12px;
    color: #909399;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    .header-container {
        padding: 0 10px;
    }
    
    .collapse-btn {
        margin-right: 10px;
    }
    
    .user-info {
        padding: 0 4px;
    }
    
    .avatar {
        width: 28px;
        height: 28px;
        margin-right: 4px;
    }
}

/* 在超小屏幕上隐藏用户名和面包屑 */
@media screen and (max-width: 576px) {
    .mobile-hidden {
        display: none !important;
    }
}

.lang-selector {
    margin-right: 20px;
}
</style>

<style>
/* 全局样式，用于自定义确认对话框 */
.logout-confirm-dialog {
    max-width: 500px;
}

.logout-confirm-dialog .el-message-box__content {
    padding: 20px;
}

.logout-confirm-dialog .el-message-box__btns {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.logout-confirm-dialog .el-message-box__btns button {
    min-width: 80px;
    margin: 0 10px;
}

@media screen and (max-width: 768px) {
    .logout-confirm-dialog {
        width: 90% !important;
        margin: 0 auto;
    }
    
    .logout-confirm-dialog .el-message-box__header {
        padding: 15px;
    }
    
    .logout-confirm-dialog .el-message-box__content {
        padding: 15px;
        font-size: 14px;
    }
    
    .logout-confirm-dialog .el-message-box__btns button {
        padding: 8px 15px;
        font-size: 14px;
    }
}
</style>